import React from 'react';
import {
  Modal,
  Button,
  Form,
  Input,
  Cascader,
  Radio,
  InputNumber,
} from 'antd';

class DispatchingCreateForm extends React.Component {
  onCancel = () => {
    const { handleCreateModalVisible } = this.props;

    handleCreateModalVisible(false);
  };

  handleCreate = e => {
    e.preventDefault();
  };

  render() {
    const { form: { getFieldDecorator }, createModalVisible } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    return (
      <Modal
        width={ 800 }
        title='添加运费模板'
        visible={ createModalVisible }
        onCancel={ this.onCancel }
        footer={ null }
      >
        <Form onSubmit={this.handleCreate}>
          <Form.Item
            { ...formItemLayout }
            label='模板名称'
          >
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '请输入模板名称',
                },
              ],
            })(
              <Input placeholder='请填写模板名称' autoComplete='off' />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='计费方式'
          >
            {getFieldDecorator('type', {
              rules: [
                {
                  required: true,
                  message: '请选择计费方式',
                },
              ],
            })(
              <Radio.Group>
                <Radio value={1}>按件数</Radio>
                <Radio value={2}>按重量</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='可配送区域'
          >
            {getFieldDecorator('area', {
              rules: [
                {
                  required: true,
                  message: '请选择可配送区域',
                },
              ],
            })(
              <Cascader style={{ width: '100%' }} placeholder='请选择可配送区域' />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='首件（个）'
          >
            {getFieldDecorator('firstItem', {
              rules: [
                {
                  required: true,
                  message: '请输入首件个数',
                },
              ],
            })(
              <InputNumber precision={0} min={1} />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='运费（元）'
          >
            {getFieldDecorator('freight', {
              rules: [
                {
                  required: true,
                  message: '请输入运费金额',
                },
              ],
            })(
              <InputNumber min={0} />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='续件（个）'
          >
            {getFieldDecorator('renewItem', {
              rules: [
                {
                  required: true,
                  message: '请输入续件个数',
                },
              ],
            })(
              <InputNumber precision={0} min={0} />
            )}
          </Form.Item>
          <Form.Item
            { ...formItemLayout }
            label='续费（元）'
          >
            {getFieldDecorator('renewFee', {
              rules: [
                {
                  required: true,
                  message: '请输入续费金额',
                },
              ],
            })(
              <InputNumber min={0} />
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{ xs: { span: 24 }, sm: { span: 16, offset: 4 } }}
          >
            <Button type='primary' htmlType='submit'>保存</Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(DispatchingCreateForm);
